<template>
    <el-card class="box-card">
        <div class="illnessBigData-wrapper">
            <div class="firstLineData">
                <pieData :data="waitForBeHospitalizedList" />

                <graphData title="医疗器材消耗" id="instrumenConsumet" :Total="instrumenTotal" :data="instrumenConsumetList"
                    name="equipmentConsume" />

                <graphData title="药品消耗" id="drugConsumetList" :data="drugConsumetList" :Total="drugTotal"
                    name="medicineConsume" />

                <graphData title="疫苗综合消耗" id="vaccineConsumetList" :Total="vaccineTotal" :data="vaccineConsumetList"
                    name="vaccineConsume" />
            </div>
            <div class="administrativeOffice-wrapper">
                <div style="width: 50%; display: flex; justify-content: space-around;">
                    <div>
                        <segmentationPieData id="current" :data="todayRanking" title="当前科室Top3" />
                    </div>
                    <div>
                        <segmentationPieData id="thisWeek" :data="weekRanking" title="本周科室Top3" />
                    </div>
                </div>
                <div style="width: 50%;">
                    <DoctorData :data="todayDoctor" />
                </div>
            </div>
            <div class="allData">
                <AllData :data="allData" />
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Chart } from '@antv/g2';
import { onMounted, onUpdated } from 'vue';
import { infomationcenterReq } from '@/api/illnessBigData/illnessBigData'
// import { onMounted } from '@vue/runtime-dom';
import pieData from './pie-data.vue'
import graphData from './graph-data.vue'
import segmentationPieData from './segmentationPie-data.vue'
import DoctorData from './doctor-data.vue'
import AllData from './allData.vue'
import { reactify } from '@vueuse/shared';
import { type } from 'os';
import { values } from 'lodash';
// 总数据
const data: any = ref([])
// 入院人数
const waitForBeHospitalizedList: any = ref([])
// 器材疫苗消耗
const instrumenConsumetList = ref<any>([])
let instrumenTotal = ref<any>()
// 药物消耗
const drugConsumetList = ref([])
let drugTotal = ref<any>()
// 疫苗消耗
const vaccineConsumetList = ref<any>([[]])
const vaccineTotal = ref<any>()
// 今日TOP3
const todayRanking = ref<any>([])
// 本周TOP3
const weekRanking = ref<any>([])
// 今日医生
const todayDoctor = ref<any>([[]])
// 总数居
const allData = ref<any>([])
onMounted(async () => {
    await getData()
    // 挂号人数
    waitForBeHospitalizedList.value = data.value.registerCharts?.type.map((item: any, index) => ({
        type: item,
        num: data.value.registerCharts.data[index],
        name: item
    }))
    // 器械消耗  vaccinesCharts
    instrumenConsumetList.value = data.value.vaccinesCharts.type.map((item, index) => (
        instrumenTotal.value = data.value.vaccinesCharts.total,
        { // title:'',
            type: item,
            data: data.value.vaccinesCharts.data[index],
            total: data.value.vaccinesCharts.total
        }
    ))
    // 药品消耗 drugsCharts
    drugConsumetList.value = data.value.drugsCharts.type.map((item, index) => (
        drugTotal.value = data.value.drugsCharts.total,
        {
            type: item,
            data: data.value.drugsCharts.data[index],
            total: data.value.drugsCharts.total
        }
    ))
    // 疫苗消耗
    vaccineConsumetList.value = data.value.equipCharts.type.map((item, index) => (
        vaccineTotal.value = data.value.equipCharts.total,
        {
            type: item,
            data: data.value.equipCharts.data[index],
            total: data.value.equipCharts.total
        }
    ))
    // 今日TOP3
    todayRanking.value = data.value.curTop3.map((item, index) => ({
        name: item.name,
        value: item.value

    }))
    // 本周TOP3
    weekRanking.value = data.value.weekTop3
    // 今日医生
    todayDoctor.value = data.value.doctorList
    // 总数据
    let newArr: any = [];
    let typeCharts: any = data.value.typeCharts;
    typeCharts.type.forEach((item, index) => {
        let arr: any = [
            { company: '等候人数', type: item, value: typeCharts.waitdata[index] },
            { company: '待缴费', type: item, value: typeCharts.waitpaydata[index] },
            { company: '复诊', type: item, value: typeCharts.repeatdata[index] },
        ];
        newArr.push(...arr);
    })
    allData.value = newArr
})
const getData = async () => {
    let res = await infomationcenterReq()
    data.value = res.data

}
</script>

<style lang="scss" >
.illnessBigData-wrapper {
    // margin: 20px 0;
    width: 100%;
    height: calc(100% - 100px);
    background-color: #fff;
    box-sizing: border-box;



    .firstLineData {

        width: 100%;
        height: 250px;
        display: flex;
        justify-content: space-between;

        div {
            width: 23%;
            height: 100%;
            box-sizing: border-box;
        }

        :nth-child(2) {
            width: 450px;
        }

        #container {
            margin: auto;
        }
    }

    .equipmentConsume-wrapper {
        margin-top: 10px;
        height: 280px;
        box-sizing: border-box;

        .title {
            margin-bottom: 20px;
            padding: 0;
            width: 300px;
            height: 50px;
            box-sizing: border-box;

            .num {
                width: 100%;
                height: 20px;
                font-weight: 700;
                font-size: 26px;
            }

        }

        #equipmentConsume {
            width: 450px;
            height: 165px;
        }

        #medicineConsume {
            width: 300px;
            height: 165px;
        }

        #vaccineConsume {
            width: 300px;
            height: 165px;
        }
    }

    .administrativeOffice-wrapper {
        margin: 20px 0;
        display: flex;
        width: 100%;
        height: 250px;
        // background-color: red;
    }

    .allData {
        margin-top: 20px;
        width: 100%;
        height: 250px;
        // background-color: gold;
    }

    .current {
        width: 280px;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
        font-weight: 700;
        text-align: center;
    }
}

::deep.el-card__body {
    padding: 0;
}
</style>
